<script setup lang="ts">
import { find } from "lodash";
import { ref } from "vue";
import { LPolygon } from "@vue-leaflet/vue-leaflet";
import { useMapStore } from "@/store";
import { queryAreaInfoList } from "@/api/pipe";
import { useLocalStore } from "@/views/layer/gismap/store";
let props = defineProps(["currentInspLineId"]);
const { L } = window;
const areaPolygonList = ref([]);
const mapStore = useMapStore();
const { areaTypeId } = storeToRefs(mapStore);
const localStore = useLocalStore();
const { visibleAreaTypes } = storeToRefs(localStore);
const onClick = (e: any) => {};
const getAllAreas = () =>
  queryAreaInfoList({
    pageSize: 100000,
    pageIndex: 1,
    polygonType: areaTypeId.value,
  }).then(({ data, succeeded }: any) => {
    if (succeeded && Array.isArray(data?.items)) {
      areaPolygonList.value = data.items
        .filter((item: any) => item.jsonGeom)
        .map((item: any) => {
          const { coordinates } = JSON.parse(item.jsonGeom);
          coordinates[0] = coordinates[0].map((item: any) => [
            item[1],
            item[0],
          ]);
          item.checked = true;
          return {
            ...item,
            coordinates,
          };
        });
    }
  });

onMounted(() => getAllAreas());
watchEffect(() => {
  if (props.currentInspLineId) {
    areaPolygonList.value.forEach((item, index) => {
      if (props.currentInspLineId.includes(item.polygonId)) {
        areaPolygonList.value[index].checked = true;
      } else {
        areaPolygonList.value[index].checked = false;
      }
    });
  }
});
</script>

<template v-if="positionRef">
  <LPolygon
    :key="polygonId"
    v-for="{ coordinates, polygonId, checked } in areaPolygonList.filter(
      (item) => item.visible !== false
    )"
    :lat-lngs="coordinates"
    :weight="1"
    :visible="checked"
    :attribution="String(polygonId)"
    color="purple"
    @click="onClick"
  />
</template>

<style scoped lang="scss"></style>
